import streamlit as st

def tool_card(name, description, page_link, color="#FFFFFF"):
    """
    渲染单个工具卡片（无图片版）
    """
    st.markdown(
        f"""
        <div style="padding: 10px;">

        <div style="
            position: relative;
            background: linear-gradient(135deg, {color}, #ffffff);
            padding: 20px;
            border-radius: 20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            border: 1px solid #eee;
            height: 180px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        "
        onmouseover="this.style.transform='scale(1.02)';this.style.boxShadow='0 8px 20px rgba(0,0,0,0.15)';"
        onmouseout="this.style.transform='scale(1)';this.style.boxShadow='0 4px 10px rgba(0,0,0,0.1)';"
        >
            <div>
                <h4 style="margin: 0 0 8px 0;">{name}</h4>
                <p style="font-size: 14px; color: #555; margin: 0;">{description}</p>
            </div>
            <a href="/{page_link}" target="_self" style="
                margin-top: 12px;
                text-decoration: none;
                font-size: 14px;
                font-weight: 600;
                color: #0066cc;
                align-self: flex-start;
            ">
                👉 进入使用
            </a>
        </div>
        """,
        unsafe_allow_html=True
    )

def render_tool_cards(tools, columns=3):
    """
    渲染多个工具卡片
    """
    cols = st.columns(columns)
    for idx, tool in enumerate(tools):
        with cols[idx % columns]:
            tool_card(
                name=tool["name"],
                description=tool["description"],
                page_link=tool["page_link"],
                color=tool.get("color", "#FFFFFF"),
            )


